<template>
    <div>
      <transition name="slide">
          <div @click="detailBack" class="detailBack"><img src="../../assets/detailBack.png"/></div>
      </transition>
      <swiper  auto loop :aspect-ratio="800/800"  >
        <swiper-item class="swiper-demo-img" v-for="(item, index) in dependencies" :key="index"><img :src="item"></swiper-item>
      </swiper>
      <div class="detailContent">
        <div class="detailTitle">蓝牙门锁，指纹，ICP卡，身份证，APP多渠道可开门，同时更注重对安全的把关</div>
        <div class="detailTip">特价优惠，满十减一，包邮</div>
        <div class="detailInfo">
          <div class="detailPrice">￥2363.20-12000.20</div>
          <div class="detailExplain">
            <div class="detailStore">剩余2555件</div>
            <div class="detailHot">月销12022件</div>
            <div class="detailEvaluate">好评100%</div>
            <div class="c"></div>
          </div>
          <div class="detailExplain">
            <div class="detailExplainLeft">
              <span class="detailViewSelected"><img class="detailSelectIcon" src="../../assets/selectIcon.png"/>免快递费</span>
              <span class="detailViewSelected"><img class="detailSelectIcon" src="../../assets/selectIcon.png"/>24小时内发货</span>
              <span class="detailViewSelected"><img class="detailSelectIcon" src="../../assets/selectIcon.png"/>赠送运险费</span>
            </div>
            <div class="detailExplainRight" @click="showExplain">
              <img class="detailViewRight" src="../../assets/rightIcon.png"/>
            </div>
            <div class="c"></div>
          </div>
        </div>
        <div class="hh"></div>
        <div class="detailFilter" @click="showFilter">
          <label>{{demo1Checkbox | detailFilter}}</label>
        </div>
        <div class="hh"></div>
        <div class="detailEvaluate">
          <div>宝贝评价<span>(234)</span></div>
          <div class="detailEvaluateInfo">
            <span class="detailEvaluateInfoPortrait"><img src="../../assets/logo.png"/></span>
            <span class="">李**说</span>
            <x-icon type="ios-heart" size="15"></x-icon>
            <x-icon type="ios-heart" size="15"></x-icon>
            <x-icon type="ios-heart" size="15"></x-icon>
            <div class="detailEvaluateInfoMsg">很漂亮</div>
            <div class="detailEvaluateInfoPro">颜色分类:20cm x 40cm(加厚款)</div>
            <div class="detailEvaluateInfoView">查看全部评价</div>
          </div>
        </div>
        <div class="hr mt10"></div>
        <div class="detailShop">
          <div class="detailShopMsg">
            <div class="detailShopPortait">
              <img src="../../assets/logo.png"/>
            </div>
            <div class="detailShopName">
              <div>娜娜家居店铺</div>
              <div>
                <x-icon type="ios-star" size="15"></x-icon>
                <x-icon type="ios-star" size="15"></x-icon>
                <x-icon type="ios-star" size="15"></x-icon>
              </div>
            </div>
            <div class="detailShopGold">
              <img src="../../assets/goldMedal.png"/>
            </div>
          </div>
          <div class="c"></div>
        </div>
        <div class="hh mt10"></div>
        <div>
          <tab :line-width=2 active-color='#FF69BA' v-model = 'moreTitleName' >
            <tab-item class="vux-center" :selected="moreTitleName === item" v-for="(item, index) in moreTitle" @click="moreTitleName = item" :key="index">{{item}}</tab-item>
          </tab>
          <div v-for="src in list" style="text-align:center;" v-if = 'moreTitleName == 0'>
            <x-img :src="src" style="max-width:100%;" :offset="-100" container="#vux_view_box_body"></x-img>
          </div>
          <div style="text-align:center;" v-if= 'moreTitleName == 1'>
            <div class=""></div>
          </div>
        </div>
        <!-- S: 服务说明 -->
        <popup style="background: #fff" v-model="show13" position="bottom" height="60%">
          <h4 class="tc pupTitle">服务说明</h4>
          <div class="popupMain">
            <img class="detailPoputSelectIcon" src="../../assets/selectIcon.png"/>免快递费
          </div>
          <div class="popupMain">
            <img class="detailPoputSelectIcon" src="../../assets/selectIcon.png"/>24小时内发货
          </div>
          <div class="popupMain">
            <img class="detailPoputSelectIcon" src="../../assets/selectIcon.png"/>赠送运险费
          </div>
          <div class="closePopupBtn">
            <div @click="show13 = false" class="closePopup">确定</div>
          </div>
        </popup>
        <!-- E:服务说明 -->
        <!-- S: 商品分类选择 -->
        <popup style="background: #fff" v-model="filterPro" position="bottom" height="80%">
          <classSlect :filterPro="filterPro"  @addCar="addCar" @sendNotice="sendNotice" ref="classSlect"></classSlect>
        </popup>
        <!-- E:商品分类选择 -->
      </div>
    </div>
</template>
<script>
  import { Swiper, SwiperItem, XButton, Popup, Checker, CheckerItem, InlineXNumber, Tab, TabItem, Panel, XImg } from 'vux'
  import classSlect from './Classification'
  export default {
    components: {
      Swiper,
      SwiperItem,
      XButton,
      Popup,
      classSlect,
      Checker,
      CheckerItem,
      InlineXNumber,
      Tab,
      TabItem,
      Panel,
      XImg
    },
    data () {
      return {
        dependencies: ['https://static.vux.li/demo/1.jpg', 'https://static.vux.li/demo/2.jpg', 'https://static.vux.li/demo/3.jpg'],
        show13: false,
        demo1Checkbox: 2,
        filterPro: false,
        moreTitle: ['图文详情', '产品参数', '店铺推荐'],
        moreTitleName: 0,
        list: [
          'https://o5omsejde.qnssl.com/demo/test1.jpg',
          'https://o5omsejde.qnssl.com/demo/test2.jpg',
          'https://o5omsejde.qnssl.com/demo/test0.jpg',
          'https://o5omsejde.qnssl.com/demo/test4.jpg',
          'https://o5omsejde.qnssl.com/demo/test5.jpg',
          'https://o5omsejde.qnssl.com/demo/test6.jpg',
          'https://o5omsejde.qnssl.com/demo/test7.jpg',
          'https://o5omsejde.qnssl.com/demo/test8.jpg'
        ]
      }
    },
    methods: {
      detailBack: function () {
        this.$router.go(-1)
      },
      showExplain: function () {
        if (this.show13) {
          this.show13 = false
        } else {
          this.show13 = true
        }
      },
      showFilter: function () {
        if (this.filterPro) {
          this.filterPro = false
        } else {
          this.filterPro = true
        }
      },
      addCar: function () {
        this.filterPro = false
      },
      sendNotice: function (noticeVal) {
        this.demo1Checkbox = noticeVal
      }
    },
    filters: {
      selectColor (val) {
        if (val == null) {
          return '未选择'
        } else if (val === '1') {
          return '20cm x 40cm'
        } else if (val === '2') {
          return '30cm x 80cm'
        } else if (val === '3') {
          return '80cm x 100cm'
        } else if (val === '4') {
          return '20cm x 40cm(加厚款)'
        } else if (val === '5') {
          return '80cm x 100cm(加厚款)'
        } else {
          return '未选择'
        }
      },
      detailFilter (val) {
        if (val == null) {
          return '请选择 颜色分类'
        } else if (val === '1') {
          return '已选: 20cm x 40cm'
        } else if (val === '2') {
          return '已选: 30cm x 80cm'
        } else if (val === '3') {
          return '已选: 80cm x 100cm'
        } else if (val === '4') {
          return '已选: 20cm x 40cm(加厚款)'
        } else if (val === '5') {
          return '已选: 80cm x 100cm(加厚款)'
        } else {
          return '请选择 颜色分类'
        }
      },
      selectStore (val) {
        if (val == null) {
          return '120'
        } else if (val === '1') {
          return '34'
        } else if (val === '2') {
          return '25'
        } else if (val === '3') {
          return '1'
        } else if (val === '4') {
          return '1'
        } else if (val === '5') {
          return '55'
        } else {
          return '120'
        }
      },
      selectPrice (val) {
        if (val == null) {
          return '2363.20-12000.20'
        } else if (val === '1') {
          return '4200.00'
        } else if (val === '2') {
          return '6999.00'
        } else if (val === '3') {
          return '8363.41'
        } else if (val === '4') {
          return '10000.90'
        } else if (val === '5') {
          return '12000.20'
        } else {
          return '2363.20-12000.20'
        }
      }
    }
  }
</script>
<style lang='sass'>
  @import "../../css/productDetail.scss";
</style>
